<div id="playground" contentEditable="true"></div>
<textarea id="textarea_1">
	<ol id="ol_1">[<li id="li_3">leve1<ol><li id="li_4">level2</li></ol></li>]</ol>
</textarea>
<textarea id="textarea_2">
	<ol><li id="li_1">[leve1]<ol><li id="li_2">[level2]</li></ol></li></ol>
</textarea>
<textarea id="textarea_3">
	<p id="p_1">some[<span id="span_1">text</span>]</p>
</textarea>
<textarea id="textarea_4">
	<p id="p_2">so^me<span id="span_2">text</span></p>
</textarea>
<textarea id="textarea_5">
	<table>
		<tr id="tr_1">
			[<td>cell</td>]
			<td>cell</td>
		</tr>
		<tr id="tr_2">
			<td>cell</td>
			[<td>cell</td>]
		</tr>
	</table>
</textarea>
<textarea id="textarea_6">
	<ol id="ol_2">
		[<li>foo</li>
		<li>bar
			<ul id="ul_1">
				<li>
					baz
				</li>]
				<li>quz</li>
			</ul>
		</li>
	</ol>
</textarea>
<textarea id="textarea_7">
	<ol>
		<li id="li_5">foo^
			<ul><li>bar</li></ul>
		</li>
	</ol>
</textarea>